<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>个人信息</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="/css/iconfont.css" rel="stylesheet"/>
    <link href="/css/common.css" rel="stylesheet"/>
    <link href="/css/uc.css" rel="stylesheet"/>
    <link href="/layui/css/layui.css" rel="stylesheet"/>
</head>
<body>
<!--头部-->
<div class="topper">
    <div class="wrapper">
        <div class="left-bar">
            <div class="back-home divider">
                <em></em><a href="/">商城首页</a>
            </div>
        </div>
        <div class="right-bar">
            <div class="login-user sub-menu">
                <a href="javascript:;" class="menu-hd" th:text="${session.currentUser.memberName}">
                    <em></em>
                </a>
            </div>
            <div class="logout divider"><a href="/logout">退出</a></div>
            <span class=""></span>
            <div class="cart"><em></em><a href="/cart/page">购物车</a></div>
            <div class="order"><em></em><a href="/order/myOrders">我的订单</a></div>
        </div>
    </div>
</div>

<!-- 修改密码栏 -->
<div class="uc-header-bg">
    <div class="uc-header wrapper">
        <a class="logo" href="/"><img src="/img/logo-mi.png" style="height: 60px; width: 60px" alt=""/></a>
        <ul class="uc-nav">
            <li><a href="/">首页</a></li>
            <li id="updatePwd"><a href="javascript:;">修改密码</a></li>
        </ul>
    </div>
</div>

<!-- 导航栏 -->
<div class="wrapper uc-router">
    <ul>
        <li><a href="/">首页</a></li>
        <li><span class="divider"></span></li>
        <li><span>个人中心</span></li>
    </ul>
</div>

<!-- 详细信息 -->
<div class="wrapper">
    <div class="uc-main clearfix">
        <div class="uc-aside">
            <div class="uc-menu">
                <div class="tit">订单中心</div>
                <ul class="sublist">
                    <li><a href="/order/myOrders">我的订单</a></li>
                </ul>
                <div class="tit">账户中心</div>
                <ul class="sublist">
                    <li><a href="/address/page">收货地址</a></li>
                </ul>
            </div>
        </div>
        <div class="uc-content">
            <div class="uc-panel">
                <div class="uc-bigtit">个人信息</div>
                <div class="uc-panel-bd">

                    <div class="account-info clearfix" th:each="m:${session.currentUser}">
                        <div class="col-headpic">
                            <div class="pic-wrap">
                                <div class="label">头像</div>
                                <div class="picbox">
                                    <img style="width: 124px; height: 124px" th:src="${m.avatar}" alt=""/>
                                </div>
                                <a class="edit" href="">修改头像</a>
                            </div>
                        </div>
                        <div class="col-userinfo">
                            <div class="control-group">
                                <div class="hd">账号：</div>
                                <div class="bd">
                                    <input class="ui-txtin" type="text" name="account" disabled th:value="${m.memberName}"/>
                                    <input type="hidden" name="id" th:value="${m.id}" id="id1"/>
                                </div>
                            </div>
<!--                            <div class="control-group">-->
<!--                                <div class="hd">昵称：</div>-->
<!--                                <div class="bd">-->
<!--                                    <input class="ui-txtin" type="text" name="nickname" disabled-->
<!--                                           th:value="${m.nickname}"/>-->
<!--                                </div>-->
<!--                            </div>-->
                            <div class="control-group">
                                <div class="hd">手机号：</div>
                                <div class="bd">
                                    <input class="ui-txtin" type="text" name="phone" disabled th:value="${m.tel}"/>
                                </div>
                            </div>
                            <!--<div class="control-group">
                                <div class="hd">默认地址：</div>
                                <div class="bd"><input class="ui-txtin" type="text" name="" th:value="${m.defAddress}" /></div>
                            </div>-->
                            <div class="control-submit">
                                <input class="ui-btn-theme submit" type="submit" id="updateMemberMessage" value="修改资料"/>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<!--脚部-->
<div class="fatfooter"></div>
</body>

<script src="/js/jquery.js"></script>
<link rel="stylesheet" href="/js/style.css"/>
<script src="/js/icheck.min.js"></script>
<script src="/js/laydate.js"></script>
<script src="/js/layer.js"></script>
<script src="/js/global.js"></script>
<script src="/layui/layui.js"></script>

<!-- 修改资料模板 -->
<script id="template3" type="text/html">
    <form class="layui-form layui-form-pane" lay-filter="form1" style="margin-left: 20px">
        <div class="layui-form-item" style="margin-top: 15px">
            <div class="layui-inline">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-inline">
                    <img id="img" width="50px" height="50px">
                    <input id="imgPath" type="hidden" name="avatar" autocomplete="off" class="layui-input"
                           style="width: 250px">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 15px">
            <div class="layui-inline">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-block">
                    <input type="text" name="account" disabled autocomplete="off" class="layui-input"
                           style="width: 250px">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 15px">
            <div class="layui-inline">
                <label class="layui-form-label">用户昵称</label>
                <div class="layui-input-block">
                    <input type="hidden" name="id"/>
                    <input type="text" name="nickname" autocomplete="off" class="layui-input" style="width: 250px">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 15px">
            <div class="layui-inline">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="phone" autocomplete="off" class="layui-input" style="width: 250px">
                </div>
            </div>
        </div>
        <!--    <div class="layui-form-item" style="margin-top: 15px">
              <div class="layui-inline">
                <label class="layui-form-label">默认地址</label>
                <div class="layui-input-block">
                  <select id="address" lay-filter="address" name="defAddress"></select>
                </div>
              </div>
            </div>-->
        <div class="layui-form-item" style="margin-top: 15px; margin-left: 105px">
            <div class="layui-inline">
                <input id="searchBtn" type="button" value="重置" class="layui-btn">
                <input id="saveBtn" type="button" value="保存" class="layui-btn">
            </div>
        </div>
    </form>
</script>
<!-- 修改密码模板 -->
<script id="template1" type="text/html">
    <form class="layui-form layui-form-pane" lay-filter="form1" style="margin-left: 20px">
        <div class="layui-form-item" style="margin-top: 15px">
            <div class="layui-inline">
                <label class="layui-form-label">原密码</label>
                <div class="layui-input-block">
                    <input type="password" name="prePassword" lay-verify="required|prePassword" autocomplete="off"
                           class="layui-input" style="width: 250px">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 15px">
            <div class="layui-inline">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input type="password" id="newPassword" name="newPassword" lay-verify="required|newPassword"
                           autocomplete="off" class="layui-input" style="width: 250px">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 15px">
            <div class="layui-inline">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="confirmPassword" lay-verify="required|confirmPassword"
                           autocomplete="off"
                           class="layui-input" style="width: 250px">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 15px; margin-left: 105px">
            <div class="layui-inline">
                <input id="searchBtn" type="button" value="重置" class="layui-btn">
                <input id="saveBtn" lay-submit="" lay-filter="save" type="button" value="保存" class="layui-btn">
            </div>
        </div>
    </form>
</script>

<script>
    layui.use(["layer", "laytpl", "form", "upload"], function () {
        let layer = layui.layer,
            $ = layui.jquery,
            laytpl = layui.laytpl,
            form = layui.form,
            upload = layui.upload;

        $("#updateMemberMessage").on("click", function () {
            // let memberId = localStorage.getItem("uid");
            var memberId="${session.currentId}"
            $.get("/member/getCurrentMember/" + memberId, function (getOne) {
                layer.open({
                    title: "修改资料",
                    type: 1,
                    area: ['400px', '400px'],
                    content: $('#template3').html()
                });

                upload.render({
                    elem: "#img",
                    url: "/attachment/uploadOne",
                    done: function (res, index, upload) {
                        if (res.code === 0) {
                            $("#imgPath").val(res.data.filePath);
                            $("#img").attr("src", res.data.filePath);
                        }
                    }
                });
                /*$.each(addresses, function (index, item) {
                  if (item.id === getOne.defAddress) {
                    $("#address").append("<option value='" + item.id + "'>" + item.province + item.city + item.district + item.detail + "</option>");
                  }
                })
                $.each(addresses, function (index, item) {
                  if (item.id !== getOne.defAddress) {
                    $("#address").append("<option value='" + item.id + "'>" + item.province + item.city + item.district + item.detail + "</option>");
                  }
                })*/
                form.render();

                //把getOne的所有值填进form框里
                form.val("form1", getOne);
                $("#img").attr("src", getOne.avatar);
                $("#saveBtn").on("click", function () {
                    //1.把表单中的数据都取出来
                    var data = form.val("form1");
                    data.id = memberId;
                    //2.派人携带数据发请求(Ajax)
                    //第三个参数等返回200时才能执行
                    $.post("/member/updateMember", data, function () {
                        layer.closeAll();
                        location.reload();
                        layer.msg("修改成功");
                    });
                });
                //});
            });
        });

        $("#updatePwd").on("click", function () {
            layer.open({
                title: "修改密码",
                type: 1,
                area: ['400px', '330px'],
                content: $('#template1').html()
            });

            //表单验证逻辑
            form.verify({
                //密码的验证
                confirmPassword: function (value) {
                    var pwd = $('#newPassword').val();
                    if (pwd != value) {
                        return "两次输入密码不一致";
                    }
                },
                prePassword: [/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,10}$/, '密码必须5到10位，且必须包含数字和字母'],
                newPassword: [/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,10}$/, '密码必须5到10位，且必须包含数字和字母'],
            });

            // 进行登录操作
            form.on('submit(save)', function (data) {
                //1.把表单中的数据都取出来
                var datas = form.val("form1");
                datas.id = localStorage.getItem("uid");
                console.log(datas);
                //2.派人携带数据发请求(Ajax)
                $.post("/member/updatePwd", datas, function (resultVo) {
                    if (resultVo.code === 200) {
                        layer.msg(resultVo.msg);
                        $.post("/logout")
                        location.reload();
                    } else {
                        layer.msg(resultVo.msg);
                    }
                });
            });
        });
    });
</script>
</html>